import React from 'react';

export const ToolLibrary = [
  {
    id: '#1',
    el: 'rect',
    elDom: (
      <svg className="rect">
        <g>
          <g></g>
          <g>
            <g
              transform="translate(0.5,0.5)"
              style={{
                visibility: 'visible',
              }}
            >
              <rect
                x="2.38"
                y="1.36"
                width="27.2"
                height="27.2"
                fill="rgb(255, 255, 255)"
                stroke="rgb(0, 0, 0)"
                strokeWidth="1.3"
                pointerEvents="all"
              ></rect>
            </g>
          </g>
          <g></g>
          <g></g>
        </g>
      </svg>
    ),
    node: {
      shape: 'rect',
      width: 50,
      height: 50,
      attrs: {
        body: {
          fill: 'transparent',
          stroke: '#000',
          magnet: false, // 当 magnet 属性为 true 时，表示该元素可以被链接，即在连线过程中可以被当做连线的起点或终点，与链接桩类似。
        },
      },
      data: {
        parent: true,
      },
    },
  },
  {
    id: '#2',
    el: 'circle',
    elDom: (
      <svg className="circle">
        <g>
          <g></g>
          <g>
            <g transform="translate(0.5,0.5)" style={{ visibility: 'visible' }}>
              <ellipse
                cx="15.98"
                cy="14.96"
                rx="13.600000000000001"
                ry="13.600000000000001"
                fill="rgb(255, 255, 255)"
                stroke="rgb(0, 0, 0)"
                strokeWidth="1.3"
                pointerEvents="all"
              ></ellipse>
            </g>
          </g>
          <g></g>
          <g></g>
        </g>
      </svg>
    ),
    node: {
      shape: 'circle',
      width: 50,
      height: 50,
      attrs: {
        body: {
          fill: 'transparent',
          stroke: '#000',
        },
      },
    },
  },
  {
    id: '#3',
    el: 'rectangle',
    elDom: (
      <svg className="rectangle">
        <g>
          <g></g>
          <g>
            <g transform="translate(0.5,0.5)" style={{ visibility: 'visible' }}>
              <rect
                x="1.44"
                y="7.68"
                width="28.8"
                height="14.4"
                fill="rgb(255, 255, 255)"
                stroke="rgb(0, 0, 0)"
                strokeWidth="1.3"
                pointerEvents="all"
              ></rect>
            </g>
          </g>
          <g></g>
          <g></g>
        </g>
      </svg>
    ),
    node: {
      shape: 'rect',
      width: 100,
      height: 50,
      attrs: {
        body: {
          fill: 'transparent',
          stroke: '#000',
        },
      },
    },
  },
  {
    id: '#4',
    el: 'RoundedRectangle',
    elDom: (
      <svg className="RoundedRectangle">
        <g>
          <g></g>
          <g>
            <g transform="translate(0.5,0.5)" style={{ visibility: 'visible' }}>
              <rect
                x="1.44"
                y="7.68"
                width="28.8"
                height="14.4"
                rx="2.16"
                ry="2.16"
                fill="rgb(255, 255, 255)"
                stroke="rgb(0, 0, 0)"
                strokeWidth="1.3"
                pointerEvents="all"
              ></rect>
            </g>
          </g>
          <g></g>
          <g></g>
        </g>
      </svg>
    ),
    node: {
      shape: 'rect',
      width: 100,
      height: 50,
      attrs: {
        body: {
          fill: 'transparent',
          stroke: '#000',
          rx: '20',
          ry: '20',
        },
      },
    },
  },
  {
    id: '#5',
    el: 'ellipse',
    elDom: (
      <svg className="ellipse">
        <g>
          <g></g>
          <g>
            <g transform="translate(0.5,0.5)" style={{ visibility: 'visible' }}>
              <ellipse
                cx="15.84"
                cy="14.88"
                rx="14.399999999999999"
                ry="9.6"
                fill="rgb(255, 255, 255)"
                stroke="rgb(0, 0, 0)"
                strokeWidth="1.3"
                pointerEvents="all"
              ></ellipse>
            </g>
          </g>
          <g></g>
          <g></g>
        </g>
      </svg>
    ),
    node: {
      shape: 'ellipse',
      width: 120,
      height: 60,
      attrs: {
        body: {
          fill: 'transparent',
          stroke: '#000',
        },
      },
    },
  },
  {
    id: '#6',
    el: 'diamond',
    elDom: (
      <svg className="diamond">
        <g>
          <g></g>
          <g>
            <g transform="translate(0.5,0.5)" style={{ visibility: 'visible' }}>
              <path
                d="M 15.98 1.36 L 29.58 14.96 L 15.98 28.56 L 2.38 14.96 Z"
                fill="rgb(255, 255, 255)"
                stroke="rgb(0, 0, 0)"
                strokeWidth="1.3"
                strokeMiterlimit="10"
                pointerEvents="all"
              ></path>
            </g>
          </g>
          <g></g>
          <g></g>
        </g>
      </svg>
    ),
    node: {
      shape: 'polygon',
      width: 80,
      height: 80,
      attrs: {
        body: {
          fill: 'transparent',
          stroke: '#000',
          // 指定 refPoints 属性，多边形顶点随图形大小自动缩放
          // https://x6.antv.vision/zh/docs/api/registry/attr#refpointsresetoffset
          refPoints: '0,10 10,0 20,10 10,20',
        },
      },
    },
  },
  {
    id: '#7',
    el: 'parallelogram',
    elDom: (
      <svg className="parallelogram">
        <g>
          <g></g>
          <g>
            <g transform="translate(0.5,0.5)" style={{ visibility: 'visible' }}>
              <path
                d="M 1.44 22.08 L 6.24 7.68 L 30.24 7.68 L 25.44 22.08 Z"
                fill="rgb(255, 255, 255)"
                stroke="rgb(0, 0, 0)"
                strokeWidth="1.3"
                strokeMiterlimit="10"
                pointerEvents="all"
              ></path>
            </g>
          </g>
          <g></g>
          <g></g>
        </g>
      </svg>
    ),
    node: {
      shape: 'path',
      width: 80,
      height: 80,
      path: 'M 1.44 22.08 L 6.24 7.68 L 30.24 7.68 L 25.44 22.08 Z',
      attrs: {
        body: {
          fill: 'transparent',
          stroke: '#000',
        },
      },
    },
  },
  {
    id: '#8',
    el: 'Hexagn',
    elDom: (
      <svg>
        <g>
          <g></g>
          <g>
            <g transform="translate(0.5,0.5)" style={{ visibility: 'visible' }}>
              <path
                d="M 6.24 5.28 L 25.44 5.28 L 30.24 14.88 L 25.44 24.48 L 6.24 24.48 L 1.44 14.88 Z"
                fill="rgb(255, 255, 255)"
                stroke="rgb(0, 0, 0)"
                strokeWidth="1.3"
                strokeMiterlimit="10"
                pointerEvents="all"
              ></path>
            </g>
          </g>
          <g></g>
          <g></g>
        </g>
      </svg>
    ),
    node: {
      shape: 'path',
      width: 80,
      height: 80,
      path: 'M 6.24 5.28 L 25.44 5.28 L 30.24 14.88 L 25.44 24.48 L 6.24 24.48 L 1.44 14.88 Z',
      attrs: {
        body: {
          fill: 'transparent',
          stroke: '#000',
        },
      },
    },
  },
];
